import React from 'react';
import styled from 'styled-components';
import {Info} from 'react-feather';
import {hide, show} from "react-functional-modal";
import ImageCommon from "../../assets/image/common/ImageCommon";
import {
    ChainName,
    colors,
    FishColors,
    FishInfoCn,
    FishName,
    getFishCardSrc,
    TimeStatusLabel
} from "../../common/common";
import {Dropdown, Menu, Tooltip,} from "antd";
import {Badge} from 'antd-mobile';
import {useWallet} from "use-wallet";
import TokenSymbol from "../TokenSymbol";
import useHusdPool from "../../hooks/useHusdPool";
import useApprove, {ApprovalState} from "../../hooks/useApprove";
import useBasisCash from "../../hooks/useBasisCash";
import {DepoManager} from "../ComponentsManager";
import {getDisplayBalance, getFullDisplayBalance} from "../../utils/formatBalance";
import {ethers} from "ethers";
import {decimalToBalance} from "../../basis-cash/ether-utils";
import {useTransactionAdder} from "../../state/transactions/hooks";
import Countdown from "antd/lib/statistic/Countdown";
import moment from "moment";
import {useTranslation} from "react-i18next";
import {useUpdateV1, useV1} from "../../state/v1action/hooks";
import {useDispatch} from "react-redux";
import {updateV1} from "../../state/v1action/action";
import config from "../../config";
import useNYCPrice from "../../hooks/useNYCPrice";
import useShowStore from '../../hooks/useShowStore';
import BasisCash from '../../basis-cash';
import useBuyFishCard from '../../hooks/useBuyFishCard';
import {TransactionResponse} from '@ethersproject/providers';
import {commify} from '@ethersproject/units';

type NftStoreProps = {
    pool: string,
    handleTransactionReceipt: (
        promise: Promise<TransactionResponse>,
        summary: string,
    ) => void,
    onClose: () => void,
    earned: any,
    changeType: (t: number) => void,
    balance: string,
};

export const NftStore = React.memo(({pool, handleTransactionReceipt, onClose, earned, changeType, balance}: NftStoreProps) => {
    const basisCash = useBasisCash();
    const [items, setItems] = React.useState([]);
    const {onBuyFishCard} = useBuyFishCard(pool, basisCash, handleTransactionReceipt);
    const [approveStatus, approve] = useApprove(basisCash?.externalTokens?.NYC, basisCash?.contracts[pool]?.address);
    React.useEffect(() => {
        if (basisCash) {
            basisCash?.showStore(pool).then(res => {
                console.log(res,"nftstore");
                setItems(res);
            });
        }
    }, [pool, basisCash]);
    console.log(balance,'-------')
    return (
        <PageShows>
            <MyFishCard>
                <MyFishTitHeadCont>
                    <MyFishTitHead>
                        <div></div>
                        <MyFishTit>鱼卡商店</MyFishTit>
                        <img
                            src={ImageCommon.img_close}
                            width={18}
                            height={18}
                            onClick={onClose}
                        />
                    </MyFishTitHead>
                    <MyFishTitDesc>
                        <DescFlex1>
                            <DescFlex2>
                                <DescBtn1>
                                    待兑换NYC
                                </DescBtn1>
                                <DescText>
                                    {Number(earned).toFixed(4)}
                                </DescText>
                            </DescFlex2>
                            <DescFlex2>
                                <DescBtn2>
                                    NYC余额
                                </DescBtn2>
                                <DescText>
                                    {Number(balance).toFixed(4)}
                                </DescText>
                            </DescFlex2>
                        </DescFlex1>
                        <DescFlexRight>
                            <DescBtn3 onClick={() => changeType(1)}>
                                我的鱼卡
                            </DescBtn3>
                            <SpanRightc
                                onClick={() => window.open(basisCash.getBuyTokenUrl('USDT/NYC', basisCash?.config?.lavaUrl))}> 前往LAVA进行获取NYC </SpanRightc>
                        </DescFlexRight>
                    </MyFishTitDesc>
                </MyFishTitHeadCont>

                <FishConts>
                    {
                        items.map(item => {
                            return (
                                <FishCardsb>
                                    <img
                                        src={ImageCommon.greenbg_big}
                                        width={230}
                                        height={390}
                                        style={{position: 'absolute', top: 0, left: 0, zIndex: -1,}}
                                    />
                                    <img
                                        src={getFishCardSrc(item.fishTypeNumber,item.color,3)}
                                        width={160}
                                        height={160}
                                        style={{marginTop: -36,}}
                                    />

                                    <FishCSpanTit>{FishInfoCn[FishName[item.fishTypeNumber]]}(品质随机)</FishCSpanTit>
                                    <FishCSpanXian></FishCSpanXian>
                                    <FishCSpanYuka>鱼卡信息 ∨</FishCSpanYuka>
                                    <FishYukuai>
                                        <FishziConts>
                                            <FishZizuo>颜色:</FishZizuo>
                                            <FishZiyou>{FishInfoCn[FishColors[item.color]]}</FishZiyou>
                                        </FishziConts>
                                        <FishziConts>
                                            <FishZizuo>NYC值:</FishZizuo>
                                            <FishZiyou>{item.price}</FishZiyou>
                                        </FishziConts>
                                        {/*<FishziConts>*/}
                                        {/*    <FishZizuo>LP值:</FishZizuo>*/}
                                        {/*    <FishZiyou>0</FishZiyou>*/}
                                        {/*</FishziConts>*/}
                                        <FishziConts>
                                            <FishZizuo>形态:</FishZizuo>
                                            <FishZiyou>{FishInfoCn[FishName[item.fishTypeNumber]]}</FishZiyou>
                                        </FishziConts>
                                        {/*<FishziConts>*/}
                                        {/*    <FishZizuo>品质:</FishZizuo>*/}
                                        {/*    <FishZiyou>*/}
                                        {/*        <img*/}
                                        {/*            src={ImageCommon.img_star}*/}
                                        {/*            width={13}*/}
                                        {/*            height={13}*/}
                                        {/*            style={{marginLeft: 5}}*/}
                                        {/*        />*/}
                                        {/*    </FishZiyou>*/}
                                        {/*</FishziConts>*/}
                                    </FishYukuai>
                                    {
                                        approveStatus == ApprovalState.NOT_APPROVED
                                            ?
                                            <FishdiBitn onClick={() => {
                                                approve()
                                            }}>授权</FishdiBitn>
                                            :
                                            <FishdiBitn onClick={() => {
                                                onBuyFishCard(item.fishLevel)
                                            }}>兑换 ({item.price}NYC)</FishdiBitn>
                                    }
                                </FishCardsb>
                            )
                        })
                    }
                </FishConts>

                <FishGuize>
                    <FishGuizeTit>规则说明：</FishGuizeTit>
                    <FishGuizeDesc>待领取NYC收益大于等于鱼卡价格时，扣除等值待领取NYC，可兑换成功；</FishGuizeDesc>
                    <FishGuizeDesc>待领取NYC收益小于鱼卡价格时，使用钱包余额补足，可兑换成功；如不够，则无法兑换。</FishGuizeDesc>
                </FishGuize>
            </MyFishCard>
        </PageShows>
    )
});

const PageShows = styled.div`
    position:  fixed;
    z-index: 10;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.5);
`

const MyFishCard = styled.div`
    position: relative;
    z-index: 88;
    top: 2%;
    left: 50%;
    margin: 0 0 0 -25%;
    width: 100%;
    max-width: 800px;
    height: 920px;
    background: #FFFFFF;
    border-radius: 20px;
`

const MyFishTitHeadCont = styled.div`
    width: 100%;
    background: linear-gradient(0deg, #F27405, #FFA82B);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 0 17px;
`

const MyFishTitDesc = styled.div`
    height: 110px;
    margin: 0 18px;
    background: #D26300;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    display:flex;
`

const DescFlex1 = styled.div`
display:flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;

`

const DescFlexRight = styled.div`
display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    margin-right: 20px;
`

const DescFlex2 = styled.div`
display:flex;
flex-direction: row;
align-items: center;
`

const DescBtn1 = styled.div`
width: 110px;
line-height: 30px;
text-align: center;
background: #FFBB7F;
border-radius: 15px;
font-size: 16px;
font-family: PingFang SC;
color: #FFFFFF;
margin-left: -9px;
cursor:pointer;
`

const DescBtn2 = styled.div`
width: 110px;
line-height: 30px;
text-align: center;
background: #96CAFF;
border-radius: 15px;
font-size: 16px;
font-family: PingFang SC;
color: #FFFFFF;
margin-left: -9px;
cursor:pointer;
`

const DescBtn3 = styled.div`
width: 110px;
line-height: 30px;
background: #FFBB7F;
border-radius: 15px;
text-align: center;
font-size: 16px;
font-family: PingFang SC;
color: #FFFFFF;
margin-left: -9px;
cursor:pointer;
`

const DescText = styled.div`
margin-left: 9px;
font-size: 24px;
font-family: PingFang SC;
color: #FFFFFF;
`

const MyFishTitHead = styled.div`
width: 100%;
height: 56px; 
display:flex;
flex-direction: row;
justify-content:space-between;
align-items: center;
`

const MyFishTit = styled.span`
line-height: 56px;
font-size: 20px;
font-family: FZCuYuan-M03S;
font-weight: 400;
color: #FFFFFF;
`

const SpanRightc = styled.span`
line-height: 18px;
font-size: 16px;
font-family: PingFang SC;
text-decoration: underline;
color: #FFFFFF;
margin-top: 15px;
cursor:pointer;
`

const FishConts = styled.div`
width: 100%;
height: 605px; 
padding: 21px 35px;
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
overflow-y: auto;
`

const FishCardsb = styled.div`
width: 230px;
height: 390px; 
position: relative;
margin-top: 51px;
display:flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
`

const FishCSpanTit = styled.span`
margin-top: 10px;
text-align: center;
line-height: 18px;
font-size: 18px;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
`

const FishCSpanXian = styled.div`
width:100%;
border-bottom: 1px dashed #ffffff;
margin-top: 12px; 
`

const FishCSpanYuka = styled.span`
text-align: center;
line-height: 14px;
font-size: 14px;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
margin-top: 10px;
`

const FishYukuai = styled.div`
width: 190px;
background: rgba(255,255,255,0.42);
margin-top: 11px;
padding: 10px 0;
`

const FishziConts = styled.div`
display: flex;
flex: 1;
`

const FishZizuo = styled.div`
display: flex;
flex: 1;
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 20px;
text-align: right;
flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding-right: 10px;
`

const FishZiyou = styled.div`
display: flex;
flex: 1;
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 20px;
text-align: left;
flex-direction: row;
    justify-content: end;
    align-items: center;
    padding-right: 10px;
`

const FishdiBitn = styled.div`
text-align: center;
width: 160px;
line-height: 36px;
background: #F27405;
border-radius: 18px;
font-size: 16px;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
margin-top: 20px;
cursor:pointer;
`

const FishGuize = styled.div`
height: 90px;
background: #FFEFE3;
border-radius: 10px;
margin: 20px 35px;
padding: 5px 16px;
`

const FishGuizeTit = styled.div`
font-size: 18px;
font-family: PingFang SC;
font-weight: bold;
color: #F27405;
`

const FishGuizeDesc = styled.div`
line-height: 41px;
font-size: 16px;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
line-height: 24px;
`

const Zhiya = styled.span`
width: 42px;
text-align: center;
background: #F27405;
border-radius: 8px;
line-height: 18px;
font-size: 12px;
margin-left: 2px;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
`

const ZhiyaContCard = styled.div`
width: 230px;
height: 260px;
background: #FFFFFF;
box-shadow: 0px 0px 10px 0px #FFE4CC;
border-radius: 20px;
display: flex;
flex-direction: column;
    justify-content: end;
    align-items: center;
`

const ZhiyaPosi = styled.div`
position: relative;
width: 191px;
margin-top: 20px;
`

const Zhiyapip = styled.div`
position: absolute;
width: 131px;
line-height: 32px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
left: 30px;
top: 0;
background: #000000;
color: #FFFFFF;
text-align: center;
`

const ZhiyaBtnzy = styled.div`
width: 160px;
background: #F27405;
border-radius: 18px;
line-height: 36px;
font-size: 16px;
font-family: PingFang SC;
color: #FFFFFF;
text-align: center;
margin-top: 20px;
`

const ZhiyaTiquBtn = styled.div`
width: 160px;
border: 1px solid #F27405;
border-radius: 18px;
line-height: 36px;
font-size: 16px;
font-family: PingFang SC;
color: #F27405;
text-align: center;
margin-top: 10px;
`

const Xiaotan1 = styled.div`
position: fixed;
    z-index: 89;
    top: 50%;
    left: 50%;
    margin: -20% 0 0 -150px;
width: 300px;
z-index: 100;
background: #fff;
border-radius: 10px;
`

const XiaotanSpan = styled.div`
font-size: 18px;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
`

const XiaotanDivCon = styled.div`
display: flex;
flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    padding: 0 30px;
`

const XiaotanDivCon1 = styled.div`
display: flex;
flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    padding: 0 30px;
`

const XiaotanDivCon2 = styled.div`
display: flex;
flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    padding: 0 30px;
`

const XiaotanTishi = styled.span`
font-size: 12px;
font-family: PingFang SC;
font-weight: 500;
color: #F27405;
text-alingn: right;
margin-top: 5px;
padding: 0 30px;
`

const XiaotanTishiTexr = styled.div`
font-size: 18px;
line-height: 30px;
font-family: PingFang SC;
font-weight: 500;
color: #F27405;
text-alingn: right;
margin-top: 16px;
padding: 0 30px;
`

const XiaotanTishiTexr1 = styled.div`
font-size: 16px;
font-family: PingFang SC;
font-weight: 500;
color: #000000;
text-alingn: right;
margin-top: 5px;
padding: 0 30px;
`

const XiaotanBtns1 = styled.div`
width: 160px;
line-height: 36px;
background: #F27405;
border-radius: 18px;
font-size: 16px;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
text-align: center;
margin-top: 5px;
margin-bottom: 20px;
`

const XiaotandivFlex = styled.div`
display: flex;
flex-direction: row;
    justify-content: center;
    align-items: center;
`

export default NftStore;
